/**
Name: Base Style
Description: Provide basic style for web pages
Author: Li Yuxi
QQ：122452357
Date: 2015-10-10
Version: 2.0
**/
/*========================================================= Reset CSS For PC =======================================================*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    background:0 0;
    font-weight:400;
    font-style:inherit;
    font-family:inherit;
    vertical-align:top
}
body {
    line-height:1;
    color:#000;
    background:#fff;
    font-size:12px;
    font-family:simsun
}
article, aside, details, figcaption, figure, footer, header, hgroup, hr, menu, nav, section {
    display:block
}
nav ul, ol, ul {
    list-style:none
}
:focus, a {
    outline:0
}
a {
    margin:0;
    font-size:100%;
    vertical-align:baseline;
    background:0 0;
    blr:expression(this.onFocus=this.blur())
}
a, ins {
    text-decoration:none
}
a, hr {
    padding:0
}
ins, mark {
    background-color:#ff9;
    color:#000
}
mark {
    font-style:italic;
    font-weight:700
}
blockquote, q {
    quotes:none
}
blockquote :after, blockquote :before, q :after, q :before {
    content:'';
    content:none
}
del {
    text-decoration:line-through
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help
}
table {
    border-collapse:collapse;
    border-spacing:0
}
caption, td, th {
    text-align:left;
    font-weight:400
}
hr {
    height:1px;
    /* border:0; */
    border-top:1px solid #cccccc;
    margin:1em 0;
}
input, select {
    vertical-align:middle;
}
/*========================================================= Particle CSS =======================================================*/

/* display */
.dn {
    display:none;
}
.di {
    display:inline;
}
.db {
    display:block;
}
.dib {
    display:inline-block;
}
/* height */
.h0 {
    height:0;
}
.h14 {
    height:14px;
}
.h16 {
    height:16px;
}
.h18 {
    height:18px;
}
.h20 {
    height:20px;
}
.h22 {
    height:22px;
}
.h24 {
    height:24px;
}
/* fixed width value */
.w20 {
    width:20px;
}
.w50 {
    width:50px;
}
.w70 {
    width:70px;
}
.w100 {
    width:100px;
}
.w120 {
    width:120px;
}
.w140 {
    width:140px;
}
.w160 {
    width:160px;
}
.w180 {
    width:180px;
}
.w200 {
    width:200px;
}
.w220 {
    width:220px;
}
.w250 {
    width:250px;
}
.w280 {
    width:280px;
}
.w300 {
    width:280px;
}
.w320 {
    width:320px;
}
.w360 {
    width:360px;
}
.w400 {
    width:400px;
}
.w460 {
    width:460px;
}
.w500 {
    width:500px;
}
.w600 {
    width:600px;
}
.w640 {
    width:640px;
}
.w700 {
    width:700px;
}
/* percent width value */
.pct10 {
    width:10%;
}
.pct15 {
    width:15%;
}
.pct20 {
    width:20%;
}
.pct25 {
    width:25%;
}
.pct30 {
    width:30%;
}
.pct33 {
    width:33.3%;
}
.pct40 {
    width:40%;
}
.pct50 {
    width:50%;
}
.pct60 {
    width:60%;
}
.pct66 {
    width:66.6%;
}
.pct70 {
    width:70%;
}
.pct75 {
    width:75%;
}
.pct80 {
    width:80%;
}
.pct90 {
    width:90%;
}
.pct100 {
    width:100%;
}
/* line-height */
.lh0 {
    line-height:0;
}
.lh14 {
    line-height:14px;
}
.lh16 {
    line-height:16px;
}
.lh18 {
    line-height:18px;
}
.lh20 {
    line-height:20px;
}
.lh22 {
    line-height:22px;
}
.lh24 {
    line-height:24px;
}
/* margin */
.m0 {
    margin:0;
}
.ml1 {
    margin-left:1px;
}
.ml2 {
    margin-left:2px;
}
.ml5 {
    margin-left:5px;
}
.ml10 {
    margin-left:10px;
}
.ml15 {
    margin-left:15px;
}
.ml20 {
    margin-left:20px;
}
.ml30 {
    margin-left:30px;
}
.mr1 {
    margin-right:1px;
}
.mr2 {
    margin-right:2px;
}
.mr5 {
    margin-right:5px;
}
.mr10 {
    margin-right:10px;
}
.mr15 {
    margin-right:15px;
}
.mr20 {
    margin-right:20px;
}
.mr30 {
    margin-right:30px;
}
.mt1 {
    margin-top:1px;
}
.mt2 {
    margin-top:2px;
}
.mt5 {
    margin-top:5px;
}
.mt10 {
    margin-top:10px;
}
.mt15 {
    margin-top:15px;
}
.mt20 {
    margin-top:20px;
}
.mt30 {
    margin-top:30px;
}
.mb1 {
    margin-bottom:1px;
}
.mb2 {
    margin-bottom:2px;
}
.mb5 {
    margin-bottom:5px;
}
.mb10 {
    margin-bottom:10px;
}
.mb15 {
    margin-bottom:15px;
}
.mb20 {
    margin-bottom:20px;
}
.mb30 {
    margin-bottom:30px;
}
/* margin negative */
.ml-1 {
    margin-left:-1px;
}
.mr-1 {
    margin-right:-1px;
}
.mt-1 {
    margin-top:-1px;
}
.mb-1 {
    margin-bottom:-1px;
}
.ml-3 {
    margin-left:-3px;
}
.mr-3 {
    margin-right:-3px;
}
.mt-3 {
    margin-top:-3px;
}
.mb-3 {
    margin-bottom:-3px;
}
.ml-20 {
    margin-left:-20px;
}
.mr-20 {
    margin-right:-20px;
}
.mt-20 {
    margin-top:-20px;
}
.mb-20 {
    margin-bottom:-20px;
}
/* padding */
.p0 {
    padding:0;
}
.p1 {
    padding:1px;
}
.pl1 {
    padding-left:1px;
}
.pt1 {
    padding-top:1px;
}
.pr1 {
    padding-right:1px;
}
.pb1 {
    padding-bottom:1px;
}
.p2 {
    padding:2px;
}
.pl2 {
    padding-left:2px;
}
.pt2 {
    padding-top:2px;
}
.pr2 {
    padding-right:2px;
}
.pb2 {
    padding-bottom:2px;
}
.pl5 {
    padding-left:5px;
}
.p5 {
    padding:5px;
}
.pt5 {
    padding-top:5px;
}
.pr5 {
    padding-right:5px;
}
.pb5 {
    padding-bottom:5px;
}
.p10 {
    padding:10px;
}
.pl10 {
    padding-left:10px;
}
.pt10 {
    padding-top:10px;
}
.pr10 {
    padding-right:10px;
}
.pb10 {
    padding-bottom:10px;
}
.p15 {
    padding:15px;
}
.pl15 {
    padding-left:15px;
}
.pt15 {
    padding-top:15px;
}
.pr15 {
    padding-right:15px;
}
.pb15 {
    padding-bottom:15px;
}
.p20 {
    padding:20px;
}
.pl20 {
    padding-left:20px;
}
.pt20 {
    padding-top:20px;
}
.pr20 {
    padding-right:20px;
}
.pb20 {
    padding-bottom:20px;
}
.p30 {
    padding:30px;
}
.pl30 {
    padding-left:30px;
}
.pt30 {
    padding-top:30px;
}
.pr30 {
    padding-right:30px;
}
.pb30 {
    padding-bottom:30px;
}
/* background-color name rule: bg - (key word/Hex color) |-> All colors are safe color */
.bgwh {
    background-color:#fff;
}
.bgfb {
    background-color:#fbfbfb;
}
.bgf5 {
    background-color:#f5f5f5;
}
.bgf0 {
    background-color:#f0f0f0;
}
.bgeb {
    background-color:#ebebeb;
}
.bge0 {
    background-color:#e0e0e0;
}
/* safe color */
.g0 {
    color:#000;
}
.g3 {
    color:#333;
}
.g6 {
    color:#666;
}
.g9 {
    color:#999;
}
.gc {
    color:#ccc;
}
.wh {
    color:white;
}
/* font-size */
.f0 {
    font-size:0;
}
.f12 {
    font-size:12px;
}
.f13 {
    font-size:13px;
}
.f14 {
    font-size:14px;
}
.f16 {
    font-size:16px;
}
.f18 {
    font-size:18px;
}
.f20 {
    font-size:20px;
}
.f24 {
    font-size:24px;
}
.f28 {
    font-size:28px;
}
/* font-family */
.fa {
    font-family:Arial;
}
.ft {
    font-family:Tahoma;
}
.fv {
    font-family:Verdana;
}
.fs {
    font-family:Simsun;
}
.fl {
    font-family:'Lucida Console';
}
.fw {
    font-family:'Microsoft Yahei';
}
/* font-style */
.n {
    font-weight:normal;
    font-style:normal;
    white-space: normal;
}
.b {
    font-weight:bold;
}
.i {
    font-style:italic;
}
/* text-align */
.tc {
    text-align:center;
}
.tr {
    text-align:right;
}
.tl {
    text-align:left;
}
.tj {
    text-align:justify;
}
/* text-decoration */
.tdl {
    text-decoration:underline;
}
.tdn, .tdn:hover, .tdn a:hover, a.tdl:hover {
    text-decoration:none;
}
/* letter-spacing */
.lt-1 {
    letter-spacing:-1px;
}
.lt0 {
    letter-spacing:0;
}
.lt1 {
    letter-spacing:1px;
}
/* white-space */
.nowrap {
    white-space:nowrap;
}
/* word-wrap */
.bk {
    word-wrap:break-word;
}
/* vertical-align */
.vm {
    vertical-align:middle;
}
.vtb {
    vertical-align:text-bottom;
}
.vb {
    vertical-align:bottom;
}
.vt {
    vertical-align:top;
}
.v-1 {
    vertical-align:-1px;
}
.v-2 {
    vertical-align:-2px;
}
.v-3 {
    vertical-align:-3px;
}
.v-4 {
    vertical-align:-4px;
}
.v-5 {
    vertical-align:-5px;
}
/* float */
.l {
    float:left;
}
.r {
    float:right;
}
/* clear */
.cl {
    clear:both;
}
/* position */
.rel {
    position:relative;
}
.abs {
    position:absolute;
}
.fixed {
    position:fixed;
}
/*z-index*/
.zx1 {
    z-index:1;
}
.zx2 {
    z-index:2;
}
.zx999 {
    z-index:999;
}
/* cursor */
.poi {
    cursor:pointer;
}
.def {
    cursor:default;
}
/* overflow */
.ovh {
    overflow:hidden;
}
.ova {
    overflow:auto;
}
/* fgbility */
.vh {
    visibility:hidden;
}
.vv {
    visibility:visible;
}
/* opacity */
.opa0 {
    opacity:0;
    filer:alpha(opacity=0);
}
/* zoom */
.z {
    *zoom:1;
}
/*========================================================= Multiply CSS =======================================================*/

/* block element horizontal center */
.auto {
    margin-left:auto;
    margin-right:auto;
}
/* clean floating */
.fix {
    *zoom:1;
}
.fix:after {
    display:table;
    content:'';
    clear:both;
}
/* base on display:table-cell adaptive */
.cell {
    display:table-cell;
    *display:inline-block;
    width:2000px;
    *width:auto;
}
/* single line word overflow using ... replace*/
.ell {
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
/* css3 transition animation effect */
.trans {
    -webkit-transition:all .3s;
    transition:all .3s;
}
/* indefinite elements vertical center */
.dib_vm {
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
}
/* text box without borders */
.bd_none {
    border:0;
    outline:none;
}
/* absolute positioning to hidden */
.abs_out {
    position:absolute;
    left:-999em;
    top:-999em;
}
/* absolute positioning to clip */
.abs_clip {
    position:absolute;
    clip:rect(0 0 0 0);
}
/* button disabled */
.disabled {
    outline:0 none;
    cursor:default!important;
    opacity:.4;
    filer:alpha(opacity:40);
    pointer-events:none;
}